<template>
  <div>
    <div class="container">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
        <el-divider content-position="center">账号信息</el-divider>
        <el-form-item label="用户名" prop="username">
          <el-input disabled v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-button @click="forgotPass()">重置密码(需要通过邮箱验证)</el-button>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input  v-model="ruleForm.email"></el-input>
        </el-form-item>
    
        <el-divider content-position="center">公司信息</el-divider>
        <el-form-item label="公司/企业/学校名称" prop="companyName">
          <el-input v-model="ruleForm.companyName"></el-input>
        </el-form-item>
        <el-form-item label="公司/企业/学校网址" prop="companyUrl">
          <el-input v-model="ruleForm.companyUrl"></el-input>
        </el-form-item>
        <el-form-item label="公司/企业/学校地址" prop="companyAddress">
          <el-input v-model="ruleForm.companyAddress"></el-input>
        </el-form-item>
        <el-form-item label="所属行业" prop="industry">
          <!-- <el-input v-model="ruleForm.industry"></el-input> -->
          <el-select v-model="ruleForm.industry" placeholder="请选择所属行业">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="母公司/集团名称" prop="parentCompanyName">
          <el-input v-model="ruleForm.parentCompanyName"></el-input>
        </el-form-item>
        <el-form-item label="母公司/集团网址" prop="parentCompanyUrl">
          <el-input v-model="ruleForm.parentCompanyUrl"></el-input>
        </el-form-item>

        <el-divider content-position="center">公司联系人信息</el-divider>


        <el-form-item label="联系人姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" prop="telephone">
          <el-input v-model="ruleForm.telephone"></el-input>
        </el-form-item>
        <el-form-item label="联系人所在城市" prop="city">
          <el-cascader
              size="large"
              :options="options_"
              v-model="ruleForm.city"
              placeholder="请选择所在地区"
            ></el-cascader>
        </el-form-item>
        <el-form-item label="联系人详细地址" prop="address">
          <el-input v-model="ruleForm.address" placeholder="可接收快递的地址"></el-input>
        </el-form-item>

        
        <el-divider content-position="center">推送信息</el-divider>
        <el-form-item label="推送信息" prop="sendAllow">
          <el-switch v-model="ruleForm.sendAllow"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即更新</el-button>
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { showLoading, hideLoading } from '../../utils/loading';
import publicMess from '../../utils/publicMess.js'
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
export default {
    name: 'person',
    data() {
        return {
          ruleForm: {},
          rules: {
            telephone: [
              { message: "请输入手机号码", trigger: "blur" },
              {
                min: 11, max: 11,
                pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                message: "请输入正确的手机号码"
              }
            ],
          },
          options_: regionData,
          options: [{
            value: 'A01',
            label: '公共安全'
          }, {
            value: 'A02',
            label: '政务'
          }, {
            value: 'A03',
            label: '教育'
          }, {
            value: 'A04',
            label: '医疗'
          }, {
            value: 'B01',
            label: '轨道'
          }, {
            value: 'B02',
            label: '公路'
          }, {
            value: 'B03',
            label: '航空'
          }, {
            value: 'B04',
            label: '水运'
          }, {
            value: 'B05',
            label: '物流'
          }, {
            value: 'C01',
            label: '电力'
          }, {
            value: 'C02',
            label: '油气'
          }, {
            value: 'C03',
            label: '矿业'
          }, {
            value: 'D01',
            label: '银行'
          }, {
            value: 'D02',
            label: '证券'
          }, {
            value: 'D03',
            label: '保险'
          }, {
            value: 'D90',
            label: '金融-其他'
          }, {
            value: 'E01',
            label: '汽车'
          }, {
            value: 'E02',
            label: '机械和电子'
          }, {
            value: 'E03',
            label: '制造-其他'
          }, {
            value: 'F01',
            label: 'ISP'
          }, {
            value: 'F02',
            label: '媒体'
          }, {
            value: 'F03',
            label: '通信'
          }, {
            value: 'F04',
            label: '软件及ICT服务'
          }, {
            value: 'Z01',
            label: '酒店及餐饮'
          }, {
            value: 'Z02',
            label: '零售与批发'
          }, {
            value: 'Z03',
            label: '建筑'
          }, {
            value: 'Z04',
            label: '文体娱'
          }, {
            value: 'Z90',
            label: '其他'
          }]
            

        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
          showLoading();
          const u = '/signin/userExtend/getUserInfo?serviceId=1';
          this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
          .then((res)=>{
            if(res.data.code == 200){
              this.ruleForm =  res.data.data;
            }else{
              this.$message.error(res.data.msg);
            };
            hideLoading();
          }).catch((err)=>{
            console.log(err);
          });
        },
        forgotPass() {
          let that = this;
          let params = {
            username: this.ruleForm.username,
          };
          let url = '/signin/userInfo/retrieve?serviceId=1';
          const headers = {
            'Content-Type': 'application/json;charset=UTF-8',
          };
          this.$axios.post(url, params, {headers}).then((res) => {
              if(res.data.code == 200){
                this.$message.success('请接收邮件之后在专属页面进行密码重置');
                // this.$router.push('/forgot');
                window.location.href = publicMess.url + '/bs_login/forgot'
              }else{
                this.$message.error(res.data.msg);
              };
          }).catch((error) => {
              console.warn(error);
          });
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.perfectUserInfo()
            } else {
              this.$message.error('验证不通过');
              return false;
            }
          });
        },
        perfectUserInfo() {
          showLoading();
          let params = this.ruleForm;
          const url = '/signin/userExtend/perfectUserInfo?serviceId=1';
          const headers = {
            'Content-Type': 'application/json;charset=UTF-8',
            'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')
          };
          this.$axios.post(url, params, {headers}).then((res) => {
            if(res.data.code == 200){
              this.$message.success(res.data.msg);
              this.getData();
            }else{
              this.$message.error(res.data.msg);
            };
            hideLoading();
          }).catch((error) => {
            console.warn(error);
          });
          hideLoading();
        }



    }
};
</script>

<style scoped lang="less">
/deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    width: 800px;
    margin: 18px auto;
}
</style>
